<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>年度巡检统计</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/bootstrap-icons.css" rel="stylesheet">
    <script src="/js/sweetalert2.js"></script>
    <style>
        .summary-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }
        
        .summary-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
        }
        
        .section-title {
            position: relative;
            padding-left: 1rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
            color: #1f2937;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background: linear-gradient(to bottom, #6366f1, #4f46e5);
            border-radius: 2px;
        }

        .inspection-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            border: none;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .inspection-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .inspection-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .inspection-month {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2937;
        }

        .inspection-toggle {
            background: none;
            border: none;
            color: #4f46e5;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            transition: all 0.3s ease;
        }

        .inspection-toggle:hover {
            background: #f3f4f6;
        }

        .inspection-content {
            display: none;
            margin-top: 1rem;
        }

        .inspection-content.show {
            display: block;
        }

        .content-section {
            margin-bottom: 1rem;
            padding: 1rem;
            background: #f9fafb;
            border-radius: 8px;
        }

        .content-title {
            font-weight: 500;
            color: #4f46e5;
            margin-bottom: 0.5rem;
        }

        .content-text {
            color: #6b7280;
            white-space: pre-line;
        }

        .inspector-info {
            display: flex;
            align-items: center;
            color: #6b7280;
            margin-top: 0.5rem;
        }

        .inspector-info i {
            margin-right: 0.5rem;
            color: #4f46e5;
        }

        .grid-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            padding: 1.5rem;
            border-radius: 12px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: none;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: scale(1.02);
        }

        .stat-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            color: white;
            font-size: 1.5rem;
        }

        .stat-title {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        @media (max-width: 768px) {
            .inspection-card {
                padding: 1rem;
            }
            
            .inspection-month {
                font-size: 1rem;
            }
            
            .content-section {
                padding: 0.75rem;
            }
            
            .grid-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .stat-card {
                padding: 1rem;
            }
            
            .stat-icon {
                width: 36px;
                height: 36px;
                font-size: 1.2rem;
                margin-bottom: 0.75rem;
            }
            
            .stat-title {
                font-size: 0.75rem;
                margin-bottom: 0.25rem;
            }
            
            .stat-value {
                font-size: 1.1rem;
                margin-bottom: 0.15rem;
            }
        }
    </style>
</head>
<body>
    <div class="page-background bg-inspection"></div>
    <div class="wave-bottom"></div>
    
    <div class="slide-container" id="slideContainer">
        <div class="slide-content" id="slideContent">
            <div class="container mt-4">
                <div class="summary-card p-4">
                    <div class="section-title">
                        <i class="bi bi-clipboard-check me-2"></i>巡检统计
                    </div>

                    <!-- 巡检统计卡片 -->
                    <div class="grid-stats">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="stat-title">线上巡检人员投入</div>
                            <div class="stat-value" th:text="'1次/'+${report.onlineInspectionStaff + '人'}">0人</div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="bi bi-arrow-repeat"></i>
                            </div>
                            <div class="stat-title">线上巡检频次</div>
                            <div class="stat-value" th:text="'1月/'+${report.onlineInspectionFrequency + '次'}">0次</div>
                        </div>
                        
                        <div class="stat-card" th::if="${report.offlineInspectionStaff > 0}">
                            <div class="stat-icon">
                                <i class="bi bi-person-badge"></i>
                            </div>
                            <div class="stat-title">线下巡检人员投入</div>
                            <div class="stat-value" th:text="'1天/'+${report.offlineInspectionStaff + '人'}">0人</div>
                        </div>
                        
                        <div class="stat-card" th::if="${report.offlineInspectionFrequency > 0}">
                            <div class="stat-icon">
                                <i class="bi bi-calendar-check"></i>
                            </div>
                            <div class="stat-title">线下巡检频次</div>
                            <div class="stat-value" th:text="'1天/'+${report.offlineInspectionFrequency + '次'}">0次</div>
                        </div>
                    </div>

                    <!-- 巡检频次趋势图 -->
                    <div class="chart-card">
                        <div class="section-title">
                            <i class="bi bi-graph-up me-2"></i>年度巡检频次趋势
                        </div>
                        <div id="frequencyChart" style="width: 100%; height: 300px;border-radius: 12px;margin-bottom: 10px;box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);"></div>
                    </div>
                    
                    <!-- 巡检内容列表 -->
                    <div class="inspections-list">
                        <div id="inspectionsList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 滑动提示 -->
    <div class="slide-hint" id="slideHint"></div>

    <!-- 页面指示器 -->
    <div class="slide-indicator" id="slideIndicator">
        <div class="slide-dot"></div>
        <div class="slide-dot"></div>
        <div class="slide-dot active"></div>
        <div class="slide-dot"></div>
    </div>

    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="/js/slide.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const reportUuid = "[[${report.reportUuid}]]";
            const hospitalId = "[[${report.hospitalId}]]";
            const demandYear = "[[${report.demandYear}]]";
            const onlineFrequency = "[[${report.onlineInspectionFrequency}]]";
            const offlineFrequency = "[[${report.offlineInspectionFrequency}]]";

            // 初始化巡检频次图表
            initFrequencyChart(demandYear, onlineFrequency, offlineFrequency);

            // 显示加载中弹窗
            Swal.fire({
                title: '巡检内容查询中...',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });

            // 获取巡检数据
            fetch(`/api/inspections/${reportUuid}/${hospitalId}/${demandYear}`)
                .then(response => response.json())
                .then(inspections => {
                    // 关闭加载中弹窗
                    Swal.close();
                    
                    const inspectionsList = document.getElementById('inspectionsList');
                    
                    if (inspections.length === 0) {
                        inspectionsList.innerHTML = `
                            <div class="text-center py-4">
                                <i class="bi bi-clipboard-x text-muted" style="font-size: 2rem;"></i>
                                <p class="text-muted mt-2">暂无巡检内容</p>
                            </div>
                        `;
                        return;
                    }
                    
                    inspections.forEach(inspection => {
                        const card = createInspectionCard(inspection,onlineFrequency,offlineFrequency);
                        inspectionsList.appendChild(card);
                    });
                })
                .catch(error => {
                    // 关闭加载中弹窗并显示错误信息
                    Swal.fire({
                        icon: 'error',
                        title: '加载失败',
                        text: '获取巡检内容时发生错误，请稍后重试',
                        confirmButtonText: '确定'
                    });
                    
                    console.error('Error fetching inspections:', error);
                    document.getElementById('inspectionsList').innerHTML = `
                        <div class="text-center py-4">
                            <i class="bi bi-exclamation-circle text-danger" style="font-size: 2rem;"></i>
                            <p class="text-danger mt-2">加载巡检内容失败</p>
                        </div>
                    `;
                });
        });

        function createInspectionCard(inspection,onlineFrequency,offlineFrequency) {
            const card = document.createElement('div');
            card.className = 'inspection-card';
            // 格式化 opsTime
            const formattedOpsTime = formatOpsTime(inspection.opsTime);

            const content = `
                <div class="inspection-header">
                    <div class="inspection-month">${inspection.month}月巡检内容</div>
                    <button class="inspection-toggle" onclick="toggleInspectionContent(this)">
                        <i class="bi bi-chevron-right"></i> 查看详情
                    </button>
                </div>
                <div class="inspector-info">
                    <i class="bi bi-calendar2-check-fill"></i>
                    <span>月度巡检频率：${"线上"+onlineFrequency+"次、线下"+getDaysInMonth(inspection.demandYear,inspection.month)*offlineFrequency+"次"}</span>
                </div>
                <div class="inspector-info">
                    <i class="bi bi-person"></i>
                    <span>巡检人员：${inspection.inspector}</span>
                </div>
                <div class="inspector-info">
                    <i class="bi bi-clock"></i>
                    <span>完成时间：${formattedOpsTime}</span>
                </div>
                <div class="inspection-content">
                    <div class="content-section">
                        <div class="content-title">
                            <i class="bi bi-laptop me-2"></i>线上巡检内容
                        </div>
                        <div class="content-text">${inspection.onlineContent || '无'}</div>
                    </div>
                    <div class="content-section">
                        <div class="content-title">
                            <i class="bi bi-person-workspace me-2"></i>线下巡检内容
                        </div>
                        <div class="content-text">${inspection.offlineContent || '无'}</div>
                    </div>
                </div>
            `;
            
            card.innerHTML = content;
            return card;
        }
        function formatOpsTime(opsTime) {
            if (!opsTime) return '无';
            const date = new Date(opsTime);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }

        function toggleInspectionContent(button) {
            const content = button.closest('.inspection-card').querySelector('.inspection-content');
            const icon = button.querySelector('i');
            
            content.classList.toggle('show');
            if (content.classList.contains('show')) {
                icon.classList.replace('bi-chevron-right', 'bi-chevron-down');
            } else {
                icon.classList.replace('bi-chevron-down', 'bi-chevron-right');
            }
        }
        /** 获取指定月份的天数*/
        function getDaysInMonth(year, month) {
            // 注意：JavaScript 中的月份是从 0 开始的（0 表示 1 月，1 表示 2 月，依此类推）
            return new Date(year, month, 0).getDate();
        }
        function initFrequencyChart(demandYear,onlineFrequency, offlineFrequency) {
            const frequencyChart = echarts.init(document.getElementById('frequencyChart'));
            
            // 获取每月天数
            const daysInMonth = Array.from({length: 12}, (_, i) => {
                return new Date(demandYear, i + 1, 0).getDate();
            });

            // 计算每月频次数据
            const months = Array.from({length: 12}, (_, i) => `${i + 1}月`);
            const onlineData = Array(12).fill(onlineFrequency); // 线上巡检每月固定频次
            const offlineData = daysInMonth.map(days => days * offlineFrequency); // 线下巡检根据天数计算

            const option = {
                title: {
                    text: '巡检频次月度分布',
                    left: 'center',
                    top: '5px',
                    textStyle: {
                        color: '#1f2937',
                        fontSize: 16,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },
                    formatter: function(params) {
                        let result = params[0].name + '<br/>';
                        params.forEach(param => {
                            result += `${param.seriesName}: ${param.value}次<br/>`;
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['线上巡检', '线下巡检'],
                    bottom: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '60px',
                    top: '60px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: months,
                    axisLine: {
                        lineStyle: {
                            color: '#6b7280'
                        }
                    },
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '巡检次数',
                    minInterval: 1,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#6b7280'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e5e7eb'
                        }
                    },
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                series: [
                    {
                        name: '线上巡检',
                        type: 'line',
                        data: onlineData,
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: '#6366f1'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}次'
                        }
                    },
                    {
                        name: '线下巡检',
                        type: 'line',
                        data: offlineData,
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: '#10b981'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}次'
                        }
                    }
                ]
            };

            frequencyChart.setOption(option);

            // 监听窗口大小变化
            window.addEventListener('resize', () => {
                frequencyChart.resize();
            });
        }
    </script>
</body>
</html> 